import { createRouter, createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';
import { useUserStore } from '@/stores/userStore';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/welcome'
  },
  {
    path: '/welcome',
    name: 'welcome',
    component: () => import('@/views/welcome/welcome.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue')
  },
  {
    path: '/layout',
    name: 'layout',
    component: () => import('@/layout/layout.vue'),
    children: [
      {
        path: '/home',
        name: 'home',
        meta: {
          name: '首页'
        },
        component: () => import('@/views/home/home.vue')
      },
      {
        path: '/music',
        name: 'music',
        meta: {
          name: '音乐'
        },
        component: () => import('@/views/music/music.vue')
      },
      {
        path: '/test',
        name: 'test',
        meta: {
          name: '测试'
        },
        component: () => import('@/views/test/test.vue')
      },
      {
        path: '/article',
        name: 'article',
        meta: {
          name: '博文'
        },
        component: () => import('@/views/home/article.vue')
      },
      {
        path: '/leave-message',
        name: 'leave-message',
        meta: {
          name: '留言板'
        },
        component: () => import('@/views/message/leave-message.vue')
      },
      {
        path: '/amap',
        name: 'amap',
        meta: {
          name: '访客地图'
        },
        component: () => import('@/views/map/amap.vue')
      },
      {
        path: '/about-us',
        name: 'about-us',
        meta: {
          name: '关于我们'
        },
        component: () => import('@/views/about/about-us.vue')
      }
    ]
  },
  {
    path: '/layoutManage',
    name: 'layoutManage',
    component: () => import('@/layout/layout-manage.vue'),
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import('@/views/manage/list.vue')
      },
      {
        path: 'visitor-list',
        name: '访客记录',
        component: () => import('@/views/manage/visitor-list.vue')
      },
      {
        path: 'category',
        name: 'category',
        component: () => import('@/views/manage/category.vue')
      },
      {
        path: 'manage-article',
        name: 'manage-article',
        meta: {
          name: '博文'
        },
        component: () => import('@/views/home/article.vue')
      }
    ]
  },
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/views/404/404.vue')
  }
];
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  // 部分浏览器不支持
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return {
        // el: document.getElementById('main'),
        el: '#main',
        // 在元素上 10 像素
        top: 0
      };
    }
  }
});
router.beforeEach((to, from, next) => {
  const token = useUserStore().getToken();
  if (to.path.indexOf('layoutManage') >= 0 && !token) {
    ElMessage.error('请先登录');
    next({ path: '/login', replace: true, force: true });
  } else {
    next();
  }
});
export default router;
